<html>
<head>
    <title>运维管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .textMsg {
            white-space: pre-wrap;
            margin-left: 20px;
            line-height: 30px;
        }

        .timeTxt {
            font-size: 10px;
            color: darkgray;
        }

        .title {
            color: #4693db;
            font-size: 15px;
            font-weight: 600;
        }
        .page-top{
            margin: 30px 0 0px 30px;

        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">运维管理 › 维修</div>
    <div class="page-main" style="height: 100px">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="userNode"  :tabsign="'p'"></dev-tree>
            </el-col>
            <el-col :span="20" style="    background: #ffffff;">
                <el-form :inline="true" class="page-top">
                    <el-form-item label="请选择日期">
                        <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="params.reportTime" placeholder="日期"
                                        style="width: 180px;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="工单状态" >
                        <el-select v-model="params.processflag" style="width: 120px;">
                            <el-option label="未派单" value="0"></el-option>
                            <el-option label="已派单" value="1"></el-option>
                            <el-option label="已处理" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="padding-left:20px">
                        <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="top">
                        <el-button @click="search" type="primary">查询</el-button>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="addClick" type="success">新增</el-button>
                    </el-form-item>
                </el-form>

    <el-table border stripe style="width: 100%" :data="tabData">
        <el-table-column prop="reportName" label="任务名称" align="center">
        </el-table-column>
        <el-table-column prop="deviceId" label="设备编号" align="center">
        </el-table-column>
        <el-table-column prop="reportTime" label="计划时间" align="center"></el-table-column>
        <el-table-column prop="processflag" label="任务状态" align="center">
            <template slot-scope="scope">
                <div v-if="scope.row.processflag == 0">
                    <el-tag size="medium"  type="info">未派单</el-tag>
                </div>
                <div v-else-if="scope.row.processflag == 1">
                    <el-tag size="medium" type="success">已派单</el-tag>
                </div>
                <div v-else-if="scope.row.processflag == 2">
                    <el-tag size="medium" type="success">已处理</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="reportReason" label="报修原因" align="center">

        </el-table-column>
        <el-table-column prop="processTime" label="处理时间" align="center">
        </el-table-column>
        <el-table-column label="操作" width="300px" align="center">
            <template slot-scope="scope">
                <el-button @click="sendClick(scope.row)" round size="mini" round icon="el-icon-share" v-if="scope.row.processflag == 0">派单</el-button>
                <el-button  round size="mini" round icon="el-icon-share" v-if="scope.row.processflag==1">提醒</el-button>
                <el-button @click="showDetail(scope.row.img)" round size="mini" round icon="el-icon-picture"  v-if="scope.row.processflag==2">查看图片</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page-footer">
        <el-pagination background layout="prev, pager, next" :pagesize="params.pagesize" :total="totalCount"  :current-page.sync="params.pageno" @current-change="onChangePage">
        </el-pagination>
    </div>
    <el-dialog title="新增报修任务"
               :visible.sync="editFormVisible"
               width="35%"
               :show-close="false">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="任务名称" prop="patrolName"
                          :rules="[ {required:true,message:'任务名称不能为空!',trigger:'blur'} ]">
                <el-col :span="12">
                    <el-input v-model="form.patrolName"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="报修设备"  prop="deviceId"   :rules="[ {required:true,message:'设备不能为空!',trigger:'blur'} ]">
                <el-select v-model="form.deviceId" placeholder="请选择设备" >
                    <el-option-group
                            v-for="group in options"
                            :key="group.label"
                            :label="group.label">
                        <el-option
                                v-for="item in group.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
           <el-form-item label="计划时间" prop="reportTime"   :rules="[ {required:true,message:'计划时间不能为空!',trigger:'blur'} ]">
               <el-date-picker
                       v-model="form.reportTime"
                       type="datetime"
                       placeholder="计划时间"
                       style="width: 241px;"
               >
               </el-date-picker>
           </el-form-item>
            <el-form-item label="维修原因" prop="reportReason"   :rules="[ {required:true,message:'维修原因不能为空!',trigger:'blur'} ]">
                <el-input type="textarea" v-model="form.reportReason"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button @click="cancelClick" type="info">取消</el-button>
                <el-button @click="submitClick" type="primary">确定
                </el-button>

            </el-form-item>
        </el-form>
    </el-dialog>
    <!--编辑弹窗-->
    <el-dialog title="报修派单" :visible.sync="editRepairVisible" width="600">
        <el-card>
            <el-form :inline="true" label-width="100px">
                <el-form-item label="接收人(*)">
                    <el-select   @change="selectChange" v-model="wf_form.wf_to" filterable placeholder="请选择接收人" style="width: 220px;">
                        <el-option
                                v-for="item in userList"
                                :key="item.Id"
                                :label="item.Text"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item label="报警详情(*)">
                        <el-input type="textarea" style="width:350px;" v-model="wf_form.wf_eventMsg"></el-input>
                    </el-form-item>
                </el-col>
                <el-form-item>
                    <el-button type="primary" size="mini" round style="margin-left: 100px;" @click="onSaveDptch">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-dialog>

    <el-dialog
            title="提示"
            :visible.sync="picVisible"
            width="50%">
        <div class="block">
            <el-image :src="src">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="picVisible = false">确 定</el-button>
  </span>
    </el-dialog>

            </el-col>
        </el-row>
    </div>

</div>

<!-- import Vue before Element -->
<script src="../../../assets/bundle.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>
    let loading ;
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            params:{
                pagesize: 10,
                pageno: 1,
                processflag:'0',
                reportTime:'',
                projectNo:'',
            },
            form:{

            },
            wf_form:{
                wf_eventMsg:'',
                wf_objType:7,
                wf_processflag:0,
                wf_operation: "报修派单",
                wf_businesstype:'',
                wf_seqno:0,
                wf_projectNo:'',
            },
            totalCount:0,
            options:[],
            devArray:[],
            userList:[],
            day: '',
            editFormVisible: false,
            editRepairVisible:false,
            taskVisible:false,
            items: [],
            editMod: false,
            tabData:[],
            picVisible:false,
            src:'',
            tooltip:false,
        },
        methods: {
            userNode:function(data){

                if (data.id.indexOf('P')==-1){
                    return;
                }
                this.wf_form.wf_projectNo = data.attributes.projectNo;
                this.params.projectNo = data.attributes.projectNo;
                this.getList();
            },
            search: function () {
                if (this.params.projectNo =='') {
                    this.$message({
                        type: 'warning',
                        message: '请选择项目'
                    })
                    return;
                }
                this.getList();
            },
            sendClick:function(row){
              this.editRepairVisible = true;
              this.form.wf_objid = row.Id;
              this.form.wf_from = SiteConfig.account.id;
              this.form.wf_eventName = row.reportName;
            },
            delBtn: function (id) {
                HttpUtil.get('Repair/Delete', {Id: id}).success((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getList();
                })
            },
            onChangePage(page){
                this.params.pageno = page;
                this.getList();
            },
            addClick: function () {
                if (this.params.projectNo ==''){
                    this.$message({
                        type: 'warning',
                        message: '请选择项目'
                    })
                    return;
                }
                this.editFormVisible = true;
            },
            checkInfo: function (data) {
                this.form = data;
                this.editMod = true;
                this.editFormVisible = true;
            },
            selectChange(val){
                let item = this.userList.find(item=>{
                    return item.Id = val
                });
                this.form.executiveName = item.Text;
            },
            saveBtn() {

            },

            submitClick() {
                this.$refs['form'].validate((valid) => {
                    this.form.reportMan = SiteConfig.account.id;
                    if (valid) {
                        console.log(this.form);
                        // HttpUtil.get('Repair/Add',this.form).success((r)=>{
                        //
                        // })
                        this.getList();
                        this.form = {};
                        this.editFormVisible = false;
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }


                });
            },
            cancelClick() {
                this.form = {};
                this.editFormVisible = false;
                this.editMod = false;
            },
            onSaveDptch(){

                HttpUtil.get('WorkFlow/Add', this.form).success((res) => {
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    })
                })
            },
            getList() {
                HttpUtil.get('Repair/List',this.params).success((res) => {
                    this.totalCount = res.total;
                    this.tabData = res.data;
                })
            },
            showDetail(pic){
                this.src = 'http://iot.hzcando.com:10004'+pic;
                this.picVisible =true;
            }
        },

        created: function () {
            this.params.reportTime = TimeUtil.convertToString(new Date()).substr(0, 10);
            loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            HttpUtil.get('User/Child',{parentId:SiteConfig.account.id}).success((r)=>{
                this.userList = r.data;
            })
        },
        mounted: function () {
            HttpUtil.get('Project/DeviceByProject').success((r)=>{
                let devArr = {};
                for (let i = 0; i < r.data.length; i++) {
                    devArr[r.data[i].projectName] = [];
                }
                for (let key in devArr) {
                    let arr = [];
                    for (let m = 0; m < r.data.length; m++) {
                        if (key == r.data[m].projectName) {
                            arr.push({
                                label: r.data[m].DeviceName,
                                value: r.data[m].DeviceID,
                                deviceType: r.data[m].deviceType,
                            });
                        }
                    }
                    devArr[key] = arr;
                }
                let arry = [];
                for (let k in devArr){
                    arry.push(
                        {
                            value:k,
                            label:k,
                            options:devArr[k]
                        }
                    )
                }
                this.options = arry;
                loading.close();
            });
            this.tooltip = true;
        }
    });


</script>

</body>
<style>

</style>
</html>
